iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0

物件是JavaScript中很強大的功能!他可以將許多的屬性儲存在一個數據中裝到一個容器中,但有些人可能會疑惑,陣列也可以存放許多元素,跟物件又有什麼不同?陣列是將型別存放於其中,但物件可以將東西的細部資訊用屬性的方式呈現。

本篇會介紹:

  • 物件的格式
  • 如何讀取物件的值

物件

物件能放置的屬性內容多元:包括字串、數字、布林值、函式、陣列

其中要注意的是

  • { }大括號包住所有的屬性
  • ,逗號隔開每個屬性
  • 內容為屬性,非變數
var a = {
key : value,
屬性 : 內容,
屬性 : 內容
}

以我的正妹朋友同時有兩個追求者為例,這時若需要記錄下追求者的細部資訊、資料就可以使用物件。

var jason = {
	name: "jasonWu",
	age: 26,
	salary: "70萬",
	parents: ["dad","mom","sister","sister"],
	pet: false,
	travel: function(){ return "好麻煩喔喜歡在家";}
};
var wally = {
	name: "wallyChen",
	age: 30,
	salary: "100萬",
	parents: ["dad","brother"],
	pet: true,
	travel: function(){ return "滿喜歡去登山游泳的!";}
};

屬性存取

可以使用[ ]括號表示法、.點表示法訪問屬性,且都會得到相同的結果

只是要注意使用[ ]時不能加上.

jason["pet"] // false 
jason.pet // false

在JASON格式的資料時會遇到"001”的屬性當屬性是字串且開頭為數字時就可以使用[" "]的方式讀取

函式屬性存取

wally.travel() // 滿喜歡去登山游泳的!
wally.travel // 錯誤!

屬性命名

  • 可使用大小寫
  • 無法使用數字
  • 無法使用-
var a = {
	1: true,
	is-letter:true
}

a.1 // 錯誤
is-letter // 錯誤

以上為本次的介紹內容,如果大家也好夯好多個追求對象也可以使用物件來練習看看唷XDD

若對本篇有問題歡迎指教與討論


上一篇
【Day18】陣列中的陣列
下一篇
【Day20】物件Object-新增、修改、刪除
系列文
喜歡打程式嗎?從JavaScript基礎來進行興趣初探!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言